<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
    <link rel="stylesheet" type="text/css" href="/css/index.css"/>
    <script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
    <script type="text/javascript">
        //用于用户中心左边菜单栏的选择项的样式
        function setSelectedClass(url) {
            $('div.cont ul.list li a[href~="' + url + '"]').parent().addClass("current");
        }

        $(function () {
            $('.mycart, #div_mycart').hover(
                function () {
                    $('#div_mycart').stop(true, true).slideDown(200);
                },
                function () {
                    $('#div_mycart').stop(true, true).slideUp(200);
                }
            );
        });
        $(function () {
            $('.allsort').hover(function () {
                $('#div_allsort').show();
            }, function () {
                $('#div_allsort').hide();
            });
        });
    </script>
    <style>


        .cart-container {
            position: absolute;
            top: 100%; /* 正好在购物车按钮下方 */
            right: 0;
            margin-top: 10px; /* 与按钮保持一定间距 */
            width: 400px;
            max-height: 500px;
            overflow-y: auto;
            background: #fff;
            border: 1px solid #ccc;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 999;
        }

        .cart-box {
            padding: 15px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .cart-header,
        .cart-item {
            display: grid;
            grid-template-columns: 60px 1.5fr 1fr 0.8fr 1fr;
            align-items: center;
            gap: 10px;
            padding: 8px 0;
        }

        .cart-header {
            font-weight: bold;
            border-bottom: 1px solid #ddd;
            margin-bottom: 10px;
            color: #333;
        }

        .cart-item {
            border-bottom: 1px solid #f0f0f0;
            padding: 8px 0;
            color: #555;
        }

        .cart-item-img img {
            border-radius: 5px;
            object-fit: cover;
        }

        .pagination-container {
            display: flex;
            justify-content: center;
            margin: 30px 0;
            font-family: Arial, sans-serif;
        }

        .pagination {
            display: flex;
            align-items: center;
            background: #fff;
            padding: 10px 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .pagination-item {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            margin: 0 5px;
            border-radius: 4px;
            text-decoration: none;
            color: #333;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .pagination-item:hover {
            background-color: #f0f0f0;
            color: #000;
        }

        .pagination-item.active {
            background-color: #007bff;
            color: #fff;
        }

        .pagination-item.dots {
            cursor: default;
        }

        .pagination-item.dots:hover {
            background-color: transparent;
        }

        .pagination-item i {
            font-size: 12px;
        }

        .pagination-item.first-page,
        .pagination-item.last-page {
            width: 35px;
        }

        .pagination-item.prev-page,
        .pagination-item.next-page {
            width: 35px;
        }

        .pagination-item.disabled {
            color: #ccc;
            cursor: not-allowed;
            pointer-events: none;
            background-color: #f5f5f5;
        }

        .pagination-item.disabled:hover {
            background-color: #f5f5f5;
            color: #ccc;
        }

        .pagination-item.disabled i {
            color: #ccc;
        }

        @media (max-width: 768px) {
            .pagination {
                padding: 8px 15px;
            }

            .pagination-item {
                width: 35px;
                height: 35px;
                margin: 0 3px;
                font-size: 13px;
            }
        }
    </style>
</head>
<body>
<%--header--%>
<div class="header">
    <h1 class="logo">
        <a title="" style="background:url('images/logo.png');" href="/">电子商务平台</a>
    </h1>
    <ul class="shortcut">
        <li class="first"><a href="ucenter">我的账户</a></li>
        <li><a href="/orders">我的订单</a></li>
        <li class='last'><a href="">使用帮助</a></li>
    </ul>
    <p class="loginfo">
        <c:if test="${not empty sessionScope.loginUser}">
            <c:if test="${loginUser.account =='admin'}">
                <a href="/admin">后台管理</a>
            </c:if>
            <c:if test="${loginUser.account !='admin'}">
                <img src="${loginUser.avatar}" width="20" height="20"/>
            </c:if>

            ${loginUser.account}您好，欢迎您！[<a href="/user/logout" class="reg">安全退出</a>]
        </c:if>
        <c:if test="${empty sessionScope.loginUser}">
            [<a href="/login">登录</a>
            <a class="reg" href="/register">免费注册</a>]
        </c:if>
    </p>
</div>
<%--navbar--%>
<div class="navbar">
    <ul>
        <li><a href="">首页</a></li>
    </ul>
    <div class="mycart" style="position: relative;">
        <dl>
            <dt>
                <a href="/car">购物车<b name="mycart_count">${cartCount}</b>件
                </a>
            </dt>
            <dd>
                <a href="/car">去结算</a>
            </dd>
        </dl>

        <!-- 购物车浮动div 开始 -->
        <div id="div_mycart" style="display:none;" class="cart-container">
            <div class="cart-box">
                <!-- 表头 -->
                <div class="cart-header">
                    <span class="cart-header-img">图片</span>
                    <span class="cart-header-name">商品</span>
                    <span class="cart-header-price">单价</span>
                    <span class="cart-header-qty">数量</span>
                    <span class="cart-header-subtotal">小计</span>
                </div>

                <!-- 商品列表 -->
                <div class="cart-items">
                    <c:forEach var="item" items="${cartItems}">
                        <div class="cart-item">
                    <span class="cart-item-img">
                        <img src="${item.goodimage}" alt="${item.goodname}" width="50" height="50"/>
                    </span>
                            <span class="cart-item-name">${item.goodname}</span>
                            <span class="cart-item-price">¥${item.goodprice}</span>
                            <span class="cart-item-qty">${item.num}</span>
                            <span class="cart-item-subtotal">¥${item.goodprice * item.num}</span>
                        </div>
                    </c:forEach>
                </div>
            </div>
        </div>
        <!-- 购物车浮动div 结束 -->

    </div>
</div>
<%--search--%>
<div class="searchbar">
    <div class="allsort">
        <a href="javascript:void(0);">全部商品分类</a>

        <!--总的商品分类-开始-->
        <ul class="sortlist" id='div_allsort' style='display:none'>

            <c:forEach items="${categories}" var="category">
                <li>
                    <h2>
                        <a href="/?categoryId=${category.id}">${category.name}</a>
                    </h2>
                </li>
            </c:forEach>
        </ul>
    </div>

    <div class="searchbox">
        <form method='get' action='/'>
            <input
                    class="text" type="text" name='searchName' autocomplete="off"
                    placeholder="输入关键字..."/> <input class="btn" type="submit" value="商品搜索"
        />
        </form>

    </div>
    <div class="hotwords">热门搜索：</div>
</div>
<%--所有商品--%>
<div id="index" class="wrapper clearfix">

    <div class="main f_l">
        <!--最新商品-->
        <div class="box yellow m_10">
            <div class="title title3">
                <h2>
                    <img src="images/front/new_product.gif" alt="最新商品" width="160" height="36">
                </h2>
            </div>
            <div class="cont clearfix">
                <ul class="prolist">
                    <c:forEach items="${goodList}" var="goods">
                        <li style="overflow:hidden"><a href="goods/${goods.id}"><img src="${goods.image}" width="175"
                                                                                     height="175" alt=""></a>
                            <p class="pro_title">
                                <a title="" href="goods/${goods.id}">${goods.name}</a>
                            </p>
                            <p class="brown">
                                惊喜价：<b>${goods.stock}</b>
                            </p>
                            <p class="light_gray">
                                市场价：<s>${goods.marketPrice}</s>
                            </p></li>
                    </c:forEach>


                </ul>
            </div>
        </div>
        <!-- 分页组件 -->
        <div class="pagination-container">
            <div class="pagination">
                <c:forEach begin="1" end="${totalPages}" var="page">
                    <a href="/?page=${page}" class="pagination-item ${currentPage == page ? 'active' : ''} ">${page}</a>
                </c:forEach>

            </div>
        </div>
    </div>
    <div class="sidebar f_r">
        <!--热卖商品-->
        <div class="hot box m_10">
            <div class="title">
                <h2>热卖商品</h2>
            </div>
            <div class="cont clearfix">
                <ul class="prolist">
                    <c:forEach items="${hotGoodList}" var="good">
                        <li><a href="goods/${good.id}"><img src="${good.image}" width="85" height="85" alt=""></a>
                            <p class="pro_title">
                                <a href="">${good.name}</a>
                            </p>
                            <p class="brown">
                                <b>￥${good.stock}</b>
                            </p></li>
                    </c:forEach>


                </ul>
            </div>
        </div>
        <!--热卖商品-->
    </div>
</div>
<%--footer --%>
<div class="footer">
    <p class="links">
        <a href="">关于我们</a>|<a href="">常见问题</a>|<a href="">安全交易</a>|<a href="">购买流程</a>|<a
            href="">如何付款</a>|<a href="">联系我们</a>|<a href="">合作提案</a>
    </p>
    Copyright 蜗牛学苑© 2015-2024 <a class="copyys" target="_blank" href="">蜀ICP备01000010号</a>
</div>

</body>
</html>